import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Toast, Button, InputItem, WingBlank, Icon } from 'weaver-mobile';

@inject('loginStore')
@withRouter
@observer
export default class Home extends React.Component {
  // constructor(props) {
  //   super(props);
  // }

  onErrorClick = () => {
    const { loginStore } = this.props;
    const { hasError, errorMsg } = loginStore;
    if (hasError) {
      Toast.info(errorMsg);
    }
  }

  onLogin = () => {
    const { loginStore } = this.props;
    const { doLogin } = loginStore;
    Toast.loading('登录中……', 0);
    doLogin();
  }

  componentDidMount() {
  }

  render() {
    const { loginStore } = this.props;
    const { hasError, account, password, errorMsg, setState, rememberAccount, rememberPassword } = loginStore;

    return (
      <div className='wm-login'>
        <span style={{ wordBreak: ' break-all', position: 'absolute', top: '-20%' }}>{errorMsg}</span>
        <div className='login-title'>
          <div className='title-left'></div>
          <div className='title-middle'></div>
        </div>
        <WingBlank size="lg"><InputItem
          type="text"
          placeholder="请输入帐号"
          error={hasError}
          onErrorClick={this.onErrorClick}
          onChange={(v) => setState({ account: v })}
          value={account}
        ><Icon type='blog-personal-o'></Icon></InputItem></WingBlank>
        <WingBlank size="lg"><InputItem
          type="password"
          placeholder="请输入密码"
          error={hasError}
          onErrorClick={this.onErrorClick}
          onChange={(v) => setState({ password: v })}
          value={password}
        ><Icon type='blog-private'></Icon></InputItem></WingBlank>
        <WingBlank size="lg">
          <div className="remember-account">
            <input className="remember account" type="checkbox" onChange={(e) => {
              setState({
                rememberAccount: e.target.checked
              })
              if (!e.target.checked) {
                setState({
                  rememberPassword: e.target.checked
                })
              }
            }} checked={rememberAccount}></input><span>记住帐号</span>
          </div>
          <div className="remember-password">
            <input className="remember password" type="checkbox" onChange={(e) => {
              setState({
                rememberPassword: e.target.checked
              })
              if (e.target.checked) {
                setState({
                  rememberAccount: e.target.checked
                })
              }
            }} checked={rememberPassword}></input><span>记住密码</span>
          </div>
        </WingBlank>
        <WingBlank size="lg"><Button type="primary" className='login-btn' onClick={this.onLogin}>登录</Button></WingBlank>
      </div>
    );
  }
}

